<template>
    <div
        class="leftbar_node divCommon w-full min-h-[6.25rem] bg-blue-100 rounded-lg shadow-lg p-6 mb-4 transition duration-300 hover:shadow-xl">
        <div class="leftbar_node_catalog text-primary font-bold text-xl mb-4">
            文章目录：
        </div>
        <div class="leftbar_node_catalog">
            <ul class="px-4 space-y-2">
                <li v-for="item in tocList" :key="item.id"
                    class="hover:text-blue-600 transition duration-200 cursor-pointer" :style="getItemStyle(item.level)"
                    @click="scrollToAnchor(item)">
                    {{ item.text }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
interface TocItem {
    text: string;
    id: string;
    level: number;
}

defineProps<{
    tocList: TocItem[];
}>();
const emit = defineEmits(['sendAnchor']);

const getItemStyle = (level: number) => ({
    marginLeft: `${(level - 1) * 16}px`,
    fontSize: `${1.2 - (level - 1) * 0.2}rem`
});

const scrollToAnchor = (item:any) => {
    // 将需要跳转的传出去
    emit('sendAnchor', item);
};
</script>

<style scoped>
/* 高亮动画 */
:deep(.highlight) {
    animation: highlight 1s ease;
}

@keyframes highlight {
    0% {
        background-color: rgba(59, 130, 246, 0.3);
    }

    100% {
        background-color: transparent;
    }
}

.leftbar_node_catalog li {
    @apply py-1 truncate transition-colors;
    border-left: 2px solid transparent;
}

.leftbar_node_catalog li:hover {
    @apply text-blue-800;
    border-left-color: theme('colors.blue.500');
}
</style>